import Card from '@/components/Card';
import Description from '@/components/Description';
import Tabs, { TabsProps } from '@/components/Tabs';
import { lcControllerGetMeterData, lcControllerGetMeters } from '@/services/ess/deviceLc';
import { useModel } from '@umijs/max';
import { Space } from 'antd';
import type { DescriptionsItemType } from 'antd/es/descriptions';
import cls from 'classnames';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import Style from './../index.less';

type AmmeterType = {
  meterType: string;
  stationId: string | number | undefined;
};
const AmmeterData: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [ammeterType, setAmmeterType] = useState('GridMeterType');
  const intl = useIntl();
  // 实时概况
  const [RealtimeDescDescription, setRealtimeDescDescription] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.realTime' }),
      key: 'onlineState',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.gridFrequency' }),
      key: 'gridFreq',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.powerFactor' }),
      key: 'powerFactor',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalActivePower' }),
      key: 'activePower',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalReactivePower' }),
      key: 'reactivePower',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalApparentPower' }),
      key: 'apparentPower',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.currentA' }),
      key: 'ia',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.currentB' }),
      key: 'ib',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.currentC' }),
      key: 'ic',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.voltageA' }),
      key: 'ua',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.voltageB' }),
      key: 'ub',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.voltageC' }),
      key: 'uc',
      children: '',
    },
  ]);
  // 组合有功
  const [combinedActiveColumns, setCombinedActiveColumns] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedActiveTotalEnergy' }),
      key: 'total',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedActiveSharpEnergy' }),
      key: 'tip',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedActivePeakEnergy' }),
      key: 'peak',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedActiveShoulderEnergy' }),
      key: 'flat',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedActiveOffPeakEnergy' }),
      key: 'valley',
      children: '',
      span: 1,
    },
  ]);
  // 正向有功
  const [positiveActiveColumns, setPositiveActiveColumns] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveTotalEnergy' }),
      key: 'total',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveSharpEnergy·' }),
      key: 'tip',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActivePeakEnergy' }),
      key: 'peak',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveShoulderEnergy' }),
      key: 'flat',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveOffPeakEnergy' }),
      key: 'valley',
      children: '',
      span: 1,
    },
  ]);
  // 反向有功
  const [reverseActiveColumns, setReverseActiveColumns] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveTotalEnergy' }),
      key: 'total',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveSharpEnergy' }),
      key: 'tip',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActivePeakEnergy' }),
      key: 'peak',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveShoulderEnergy' }),
      key: 'flat',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveOffPeakEnergy' }),
      key: 'valley',
      children: '',
      span: 1,
    },
  ]);
  // 组合无功
  const [combinedReactiveColumns, setCombinedReactiveColumns] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveTotalEnergy' }),
      key: 'total',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveTotalEnergy' }),
      key: 'tip',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveSharpEnergy' }),
      key: 'peak',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveShoulderEnergy' }),
      key: 'flat',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveOffPeakEnergy' }),
      key: 'valley',
      children: '',
      span: 1,
    },
  ]);
  // 正向无功
  const [positiveReactiveColumns, setPositiveReactiveColumns] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveTotalEnergy' }),
      key: 'total',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveSharpEnergy' }),
      key: 'tip',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactivePeakEnergy' }),
      key: 'peak',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveShoulderEnergy' }),
      key: 'flat',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveOffPeakEnergy' }),
      key: 'valley',
      children: '',
      span: 1,
    },
  ]);
  // 反向无功
  const [reverseReactiveColumns, setReverseReactiveColumns] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveTotalEnergy' }),
      key: 'total',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveSharpEnergy' }),
      key: 'tip',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactivePeakEnergy' }),
      key: 'peak',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveShoulderEnergy' }),
      key: 'flat',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveOffPeakEnergy' }),
      key: 'valley',
      children: '',
      span: 1,
    },
  ]);
  const [items, setItems] = useState<TabsProps['items']>([
    {
      key: 'GridMeterType',
      label: intl.formatMessage({ id: 'systemManagement.neddTochange.gatewayMeter' }),
      children: '',
    },
    {
      key: 'EssMeterType',
      label: intl.formatMessage({ id: 'systemManagement.neddTochange.energyStorageMeter' }),
      children: '',
    },
    {
      key: 'LoadMeterType',
      label: intl.formatMessage({ id: 'systemManagement.neddTochange.loadMeter' }),
      children: '',
    },
    {
      key: 'PvMeterType',
      label: intl.formatMessage({ id: 'systemManagement.neddTochange.solarMeter' }),
      children: '',
    },
    {
      key: 'WindMeterType',
      label: intl.formatMessage({ id: 'systemManagement.neddTochange.windMeter' }),
      children: '',
    },
  ]);
  const getAmmeterData = (params: AmmeterType) => {
    lcControllerGetMeterData(params).then((res) => {
      console.log('lcControllerGetMeterData', res);
      if (res.data) {
        // 获得实施概况
        const getRealtimeDescDescription = RealtimeDescDescription.map((item) => {
          return {
            ...item,
            children: res.data[item.key],
          };
        });
        setRealtimeDescDescription(getRealtimeDescDescription);
        // 获得组合有功
        setCombinedActiveColumns(
          combinedActiveColumns.map((item) => {
            return {
              ...item,
              children: res.data?.combinedActive[item.key],
            };
          }),
        );
        // 获得正向有功
        setPositiveActiveColumns(
          positiveActiveColumns.map((item) => {
            return {
              ...item,
              children: res.data?.positiveActive[item.key],
            };
          }),
        );
        // 获得反向有功
        setReverseActiveColumns(
          reverseActiveColumns.map((item) => {
            return {
              ...item,
              children: res.data?.reverseActive[item.key],
            };
          }),
        );
        // 获得组合无功
        setCombinedReactiveColumns(
          combinedReactiveColumns.map((item) => {
            return {
              ...item,
              children: res.data?.combinedReactive[item.key],
            };
          }),
        );
        // 获得正向无功
        setPositiveReactiveColumns(
          positiveReactiveColumns.map((item) => {
            return {
              ...item,
              children: res.data?.reverseActive[item.key],
            };
          }),
        );
        // 获得反向无功
        setReverseReactiveColumns(
          reverseReactiveColumns.map((item) => {
            return {
              ...item,
              children: res.data?.reverseReactive[item.key],
            };
          }),
        );
      }
    });
  };
  useEffect(() => {
    const params = {
      meterType: ammeterType,
      stationId: initialState?.stationId,
    };
    getAmmeterData(params);
    lcControllerGetMeters().then((res) => {
      if (res.success) {
        const itemMap = res.data.map((item: API.MeterVo) => {
          return {
            key: item.code,
            label: item.name,
            children: '',
          };
        });
        setItems(itemMap);
      }
    });
  }, []);
  return (
    <>
      <Tabs
        items={items}
        value={ammeterType}
        tabsLevel={2}
        onChange={(e) => {
          setAmmeterType(e);
          const params = {
            meterType: e,
            stationId: initialState?.stationId,
          };
          getAmmeterData(params);
        }}
      ></Tabs>
      {items.length > 0 && (
        <div>
          <Card
            title={intl.formatMessage({
              id: 'systemManagement.neddTochange.implementationOverview',
            })}
            className="global-secondary-card"
          >
            <Description
              items={RealtimeDescDescription}
              column={{ xxl: 3, xl: 4, md: 2, sm: 1 }}
              className={cls(Style.descriptions, Style.descriptionsImplemente)}
            />
          </Card>
          ,
          <Card
            title={intl.formatMessage({ id: 'stationRealtimeMonitoring.energyData' })}
            className="global-secondary-card"
          >
            <Space direction={'vertical'} size={'middle'}>
              {/*组合有功*/}
              <Description
                items={combinedActiveColumns}
                className={Style.descriptions}
                column={{ xxl: 5, xl: 4, md: 2, sm: 1 }}
              />
              {/*正向有功*/}
              <Description
                items={positiveActiveColumns}
                column={{ xxl: 5, xl: 4, md: 2, sm: 1 }}
                className={Style.descriptions}
              />
              {/*反向有功*/}
              <Description
                items={reverseActiveColumns}
                column={{ xxl: 5, xl: 4, md: 2, sm: 1 }}
                className={Style.descriptions}
              />
              {/*组合无功*/}
              <Description
                items={combinedReactiveColumns}
                column={{ xxl: 5, xl: 4, md: 2, sm: 1 }}
                className={Style.descriptions}
              />
              {/*正向无功*/}
              <Description
                items={positiveReactiveColumns}
                column={{ xxl: 5, xl: 4, md: 2, sm: 1 }}
                className={Style.descriptions}
              />
              {/*反向无功*/}
              <Description
                items={reverseReactiveColumns}
                column={{ xxl: 5, xl: 4, md: 2, sm: 1 }}
                className={Style.descriptions}
              />
            </Space>
          </Card>
        </div>
      )}
    </>
  );
};

export default AmmeterData;
